<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>公会成员</span>
    </div>
    <el-button type="primary" @click="addMember">添加成员</el-button>
    <el-table :data="members" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="playerId" label="玩家ID" width="180"></el-table-column>
      <el-table-column prop="name" label="玩家名称"></el-table-column>
      <el-table-column prop="position" label="职位" width="180"></el-table-column>
      <el-table-column prop="joinTime" label="加入时间" width="200"></el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button @click="editMember(scope.row)" type="primary" size="small">编辑</el-button>
          <el-button @click="deleteMember(scope.row.id)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getGuildMembersByGuildId, addGuildMember, deleteGuildMember } from '@/utils/requests.js';

const members = ref([]);

const loadMembers = async () => {
  const response = await getGuildMembersByGuildId(1); // 假设公会ID为1
  members.value = response.data;
};

onMounted(() => {
  loadMembers();
});

const addMember = () => {
  // 实现添加成员逻辑
};

const editMember = (member) => {
  // 实现编辑成员逻辑
};

const deleteMember = async (id) => {
  await deleteGuildMember(id);
  loadMembers();
};
</script>